<template>
	<view class="order">
		<u-navbar title="订单详情" :background="{ background: '#a0cfff' }" title-color="#FFFFFF"></u-navbar>
		<view class="u-m-15 orderTop">
			<view class="orderCon u-p-20">
				<view class="orderType flex-sbc">
					<view style="font-size: 38rpx;">
						<view v-if="order.orderType == '1'">下单</view>
						<view v-if="order.orderType == '2'">发货</view>
						<view v-if="order.orderType == '3'">已签收</view>
						<view v-if="order.orderType == '4'">用户取消</view>
						<view v-if="order.orderType == '5'">商家取消</view>
						<view v-if="order.orderType == '6'">用户已评论</view>
						<view v-if="order.orderType == '7'">商家已评论</view>
						<view v-if="order.orderType == '8'">退货</view>
						<view v-if="order.orderType == '9'">退货中</view>
						<view v-if="order.orderType == '10'">退货失败</view>
						<view v-if="order.orderType == '11'">退货成功</view>
					</view>
					<view>{{order.updateTime}}</view>
				</view>	
				<view class="message u-m-t-10" v-if="order.orderType == '9' || order.orderType == '11'">
					<view style="font-size: 42rpx;">退货地点：送{{sales.address}}</view>
					<view>{{order.name}} {{order.phone}}</view>
					<view>退货时间：{{sales.time}}</view>
					<view>备注：{{sales.remark}}</view>
				</view>
				<view class="message u-m-t-10" v-else>
					<view style="font-size: 42rpx;">送{{order.address}}</view>
					<view>{{order.name}} {{order.phone}}</view>
				</view>
			</view>
		</view>

		<view class="orderCu u-m-15">
			<view class="cuu u-p-20">
				<view class="top">
					<view class="left">
						<u-icon name="home" :size="30" color="rgb(94,94,94)"></u-icon>
						<view class="store">{{order.user.username}}</view>
						<u-icon name="arrow-right" color="rgb(203,203,203)" :size="26"></u-icon>
					</view>
				</view>
				<view class="item u-m-t-15">
					<view class="left">
						<image :src="order.shop.shopUrl" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="title u-line-2">{{ order.shop.title }}</view>
						<view class="title u-line-2 u-font-24" style="color: #909399;">{{ order.shop.content }}</view>
						<view class="type">
							<text class="typeTitle">{{ order.lity.listType }}成新</text>
						</view>
						<view class="delivery-time u-m-t-30">时间： {{ order.updateTime }}</view>
					</view>
					<view class="right">
						<view class="price">
							￥{{ order.shop.price }}
							<!-- <text class="decimal">.{{ priceDecimal(item.price) }}</text> -->
						</view>
						<view class="number">x1</view>
					</view>
				</view>
				<view class="total">
					共1件商品 合计:
					<text class="total-price">
						￥{{ order.shop.price }}</text>
					</text>
				</view>
				<view class="total" v-if="type == 1">
					<u-button plain size="mini" @click="collectClick()">加入购物车</u-button>
					<u-button class="u-m-l-30" plain size="mini"
						v-if="order.orderType == '6' || order.orderType == '3' || order.orderType == '7'"
						@click="orderClick(order.id,8,order.shopId)">退货
					</u-button>
				</view>

				<view class="total" v-if="type == 2">
					<u-button class="u-m-l-30" plain size="mini" v-if="order.orderType == '8'"
						@click="orderClick(order.id,10,order.shopId)">不同意退货
					</u-button>
					<u-button class="u-m-l-30" plain size="mini" v-if="order.orderType == '8'" @click="suShow = true">
						同意退货
					</u-button>
				</view>

				<view class="orderTy flex-sbc">
					<view>订单编号：</view>
					<view class="right">{{ordeIn}}</view>
				</view>
				<view class="orderTy flex-sbc">
					<view>订单创建时间：</view>
					<view class="right">{{order.creatTime}}</view>
				</view>
			</view>
		</view>

		<u-popup v-model="suShow" mode="bottom">
			<view class="u-m-40">
				<view class="u-m-30" style="text-align: center;">填写信息</view>
				<u-form :model="form" ref="uForm" label-width="150">
					<u-form-item label="地址">
						<u-input type="textarea" v-model="form.address" />
					</u-form-item>
					<u-form-item label="时间">
						<u-input v-model="form.time" />
					</u-form-item>
					<u-form-item label="备注">
						<u-input type="textarea" v-model="form.remark" />
					</u-form-item>
				</u-form>
				<view class="u-m-t-30">
					<u-button type="error" @click="addSales()">确定</u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import helper from '../../common/helper.js'
	import time from '../../common/time.js'
	export default {
		data() {
			return {
				id: "",
				type: 0,
				order: {},
				ordeIn: '',
				suShow: false,
				form: {
					address: '',
					time: ''
				},
				sales:{}
			}
		},
		onLoad: function(options) {
			let that = this
			if (options.id != null) {
				that.id = options.id
				that.getOrderId()
			}
			if (options.type != null) {
				that.type = options.type
			}
		},
		methods: {
			getOrderId() {
				let that = this
				let data = {
					id: that.id
				}
				that.postRequest(helper.getOrderId, data).then(res => {
					if (res.data.flag == "200") {
						let serve = res.data.orderList
						if (serve.shop.shopUrl.indexOf("<<tupian>>") > 0) {
							serve.shop.shopUrl = serve.shop.shopUrl.split("<<tupian>>")[0]
							// console.log(index)
						}
						that.ordeIn = serve.creatTime + "-" + serve.id
						serve.creatTime = that.formatDateTime(serve.creatTime)
						serve.updateTime = that.formatDateTime(serve.updateTime)
						that.order = serve
						
						if(serve.orderType == "9" || serve.orderType == "11"){
							that.getSalesId()
						}
					}
				})
			},
			orderClick(id, index, shopId) {
				let that = this
				let data = {
					id: id,
					orderType: index,
					shopId: shopId
				}
				var tile;
				if (index = 8) {
					tile = "申请退货"
				}
				if (index = 9) {
					tile = "退货"
				}
				that.postRequest(helper.updateOrderType, data).then(res => {
					if (res.data.flag == "200") {
						uni.showToast({
							title: tile + '成功',
							icon: 'none',
							duration: 2000
						})
						that.getOrderId()
					} else {
						uni.showToast({
							title: tile + '失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			addSales() {
				let that = this
				let user = uni.getStorageSync('user')
				let data = {
					shopId: that.order.shopId,
					orderId: that.order.id,
					userId: that.order.userId,
					manageId: user.id,
					address: that.form.address,
					time: that.form.time,
					remark: that.form.remark
				}
				that.postRequest(helper.addSales, data).then(res => {
					if (res.data.flag == "200") {
						uni.showToast({
							title: '退货成功',
							icon: 'none',
							duration: 2000
						})
						that.orderClick(that.order.id,9,that.order.shopId)
						that.suShow = false
					} else {
						uni.showToast({
							title: '退货失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
			getSalesId(){
				let that = this
				let data = {
					orderId: that.id
				}
				that.postRequest(helper.getSalesId, data).then(res => {
					if (res.data.flag == "200") {
						let serve = res.data.sales
						that.sales = serve
					}
				})
			},
			//加入购物车
			collectClick() {
				let that = this
				let user = uni.getStorageSync("user")
				let data = {
					userId: user.id,
					shopId: that.order.shopId,
					type: 1
				}
				that.postRequest(helper.addCollect, data).then(res => {
					if (res.data.flag == "200") {
						uni.showToast({
							title: '成功加入购物车',
							icon: 'none',
							duration: 2000
						})
					} else {
						uni.showToast({
							title: '加入购物车失败',
							icon: 'none',
							duration: 2000
						})
					}
				})
			},
		}
	}
</script>


<style>
	page {
		background-color: rgb(240, 240, 240);
	}
</style>
<style lang="scss" scoped>
	.order {
		.orderTop {
			.orderCon {
				background-color: #FFFFFF;
				border-radius: 20rpx;

				.orderType {
					color: #F1A532;
				}

				.message {}
			}
		}

		.orderCu {
			.cuu {
				background-color: #FFFFFF;
				border-radius: 20rpx;

				.top {
					display: flex;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;

						.store {
							margin: 0 10rpx;
							font-size: 32rpx;
							font-weight: bold;
						}
					}

					.right {
						color: $u-type-warning-dark;
					}
				}

				.item {
					display: flex;
					justify-content: space-between;

					// margin: 20rpx 0 0;
					.left {
						width: 220rpx;
						margin-right: 20rpx;

						image {
							width: 200rpx;
							height: 200rpx;
							border-radius: 10rpx;
						}
					}

					.content {
						width: calc(100% - 290rpx);

						.title {
							font-size: 28rpx;
							line-height: 50rpx;
						}

						.type {
							margin: 10rpx 0;
							font-size: 24rpx;

							.typeTitle {
								color: #DD524D;
								border: 1rpx solid #DD524D;
								border-radius: 8rpx;
								padding: 5rpx;
							}

						}

						.delivery-time {
							color: #e5d001;
							font-size: 24rpx;
						}
					}

					.right {
						width: 70rpx;
						margin-left: 10rpx;
						padding-top: 20rpx;
						text-align: right;

						.decimal {
							font-size: 24rpx;
							margin-top: 4rpx;
						}

						.number {
							color: $u-tips-color;
							font-size: 24rpx;
						}
					}
				}

				.total {
					margin-top: 20rpx;
					text-align: right;
					font-size: 24rpx;

					.total-price {
						font-size: 32rpx;
					}
				}

				.orderTy {
					margin-top: 15rpx;
					font-size: 28rpx;

					.right {
						color: #BBBCC6;
					}
				}
			}
		}
	}
</style>
